資料表單資訊構成和互動框架 Charts （指南）

圖表的價值

圖表是傳達複雜性資訊的絕佳方式，也是提升使用者體驗的常用方式，健康和運動表幫助我們瞭解和激勵身體，天氣圖表有助於我們規劃行程。圖表相比文字能更直觀和精確的表達出差異和變化，圖表還有助於介面多樣化設計表達

什麼時候使用圖表？

Change 變化性：生動地展示資料歷史或預測的變化

Proportion 比率：動態的表達事物的進展，完成率以及變空的狀態

Comparison 比較性：評估資料的差異性和對比性

圖表的設計理念

1 描述需要體現圖表的內容和關鍵資訊

2資料的細節能使圖表更加生動且有深度

3在互動中使用漸進式來展示圖表的複雜性

圖表的資訊構成

圖表為使用者提供焦點

開發者應該將圖表用在重點資訊的表達上，使用者才能感受到這種被強調的訊號（引導注意力）

A 使用一張柱狀圖，顯示過去30天的銷售總額

B 首先新增一個描述來告訴使用者圖表代表什麼，如：30日銷售量（代表圖表在表達的主題）

C 要描述更具體資訊

方式1（比如是什麼的銷量）如30日銷量＋共售xxx個產品，這樣使用者才能第一時間獲取到圖表的關鍵資訊

或使用一個完整的句子來描述方式1的資訊，如：在過去的30天內共售xxx個產品

將資料進行分析並給出結果，如：過去30天的銷量增長了12%，共售出xxx個產品，這將幫助使用者瞭解最近銷量環比的高低或增減。且對於資料不熟的使用者來說更加有意義（提升認知並瞭解了背景和變化）

圖表資料的展示方式

嘗試從不同維度表達細節資料時，總結資料很重要，當表達分類資料（如按周顯示）或 突出個別資料（如高亮最高值）時，需將圖表多維度化

A 宏觀層：用來描述整個資料集，如總數或平均值

B 中等層：關注資料的子集，比如時間維度的子集，如：工作日與週末進行比較

或一天中時間段的變化

還可以表達產品款式的銷量

或各城市的銷量

C 微觀層：專注於個別資料點

最後一次交易或最大的銷售額，他可能是你想在圖表中突出顯示的重要細節

圖表的互動框架

將銷量表與以上的不同觀測維度相互結合提高可用性，再下方區域擴充套件出帶有摘要資訊的可點選模組。點選後顯示相對應的詳盡圖表資料

可以展示每日平均值。

工作日與週末之間的銷售差。

最佳銷售日

互動框架的漸進式表達

A 如設計一個由簡化表到詳細表的互動路徑時，在操作的過程中圖表檢視會從小到大，在這個變化過程中，需要繼承數值、上下文和圖表狀態。

因為如果使用者對簡化表感興趣，那麼他希望點選展開的詳細表內容一致。這意味著要保證形態和關鍵資料一致，才能確保體驗的連續性。

多圖表共存的設計策略

當介面中包含多個圖表時，相當於在構建圖表設計系統，再規劃時有兩個需要理解並運用的思維：

使用熟悉的圖表形式來幫助理解，並有意地在不同圖表之間建立設計上的差異感

A 使用熟悉的圖表模型，因為如果使用者用過類似就會很容易理解你圖表，如常見的柱形圖和折線圖，散點圖就屬於不常見的，需要額外的說明才能被使用者理解

在表達獨特設計的圖表時，則需要一些動態的引導過程來幫助使用者理解。當環形活動完後會分開展示移動、鍛鍊、站立三個部分。可以看出新的圖表形式是應用的核心，而非附屬資訊，這種重要性的表達方式旨在驅使使用者去探索和理解它

在設計附屬支援型圖表時，則需選用熟悉的圖表形式

B 圖表之間的差異性很重要

以兩份銷售量圖表舉例來說明這點：透過逐步更新右側圖表資訊來闡述如何透過設計來表達差異性。

展示最近30日-12個月資料，可以看出僅僅靠不同的描述，差異化是不足的。因為僅有文字的變化很容易被忽略。

改變時間範圍

加入不同的顏色之後差異性就得到了明顯的提升，差異性的提升更有助於使用者閱讀文字描述

案例b 將右側的圖表轉為12個月每天銷售額的範圍，這需要對描述和資料的表達方式進行改變，同時修改柱狀圖的造型來強調變化的重要性。

右側的圖表傳達了不同的主題、時間範圍和指標，有意設計不同的樣式是為了提升差異的識別性